<html>

<head>
    <meta charset="utf-8">
</head>
<style>
    .pargraph {
        text-indent: 2em;
    }
</style>
<script src="js\HighCharts\highcharts.js"></script>
<script src="js\HighCharts\modules\exporting.js"></script>
<body>
    <div>
        <input type="button" value="第一题" onclick="window.open('questionOne.html')">
        <input type="button" value="第二题" onclick="window.open('questionTwo.html')">
    </div>
    <hr>
    <p>需求：当前希望分析产品上线两周后，页面的使用人群特点（年龄、性别、城市）和页面上不同入口点击率（页面上各种按钮、超链接等等的点击次数/页面访问次数）的关系。
        拿到的数据格式为csv格式，每行数据包括：用户操作时间、用户id、用户对应的信息（好几列，年龄、性别、城市）、操作行为（访问、点击）、被操作模块名称（访问行为此列为空，点击行为此列为被点击入口的名称），示例如下</p>
    <img src="img\作业题1图片.png">
    <p>任务：对过去两周产品的使用人群特点和入口点击率进行描述和可视化作图，说明上两周的现状情况。</p>
    <p>要求：从整体角度描述提到两个指标的变动情况；将不同入口点击率按照人群特点进行划分，描述不同人群的入口点击偏好、对某个入口点击率的差异。</p>
    <hr>
    <b>解答：</b>
    <p class="pargraph">
        由于是将数据进行可视化展示，所以直接想到的就是使用前段的ECharts或者是HighCharts进行数据的展示，关键是确定展示的内容是什么，以及关键的坐标和数据如何选择；
    </p>
    <p class="pargraph">
        首先是根据数据源来确定获取数据的方式，csv文件是类似于Excel文件的文件格式，比较规律，每一列的数据都是有列名的，因此获取图表所需要的数据并不是很困难，只需要根据列明进行数据获取就可以了；
    </p>
    <p class="pargraph">
        获取到数据之后可以需要根据需求将数据进行处理，因为需求的主要区分是根据不同人群进行区分，而不同的人群就需要根据人群的特点（年龄、性别、城市）进行分组，例如分为：一线城市儿童（男）、一线城市儿童（女）、一线城市青年（男）、一线城市青年（女）...。当然分组的颗粒大小需要根据具体的需求来确定，如果不是需要颗粒度很细小的可以分为儿童、青年、中年、老年即可；
    </p>
    <p class="pargraph">
        展示的图表可以选择饼状图和柱状图的混合图，因为混合图不仅可以直观的看出每个人群的访问栈所有访问的百分比，还可以根据不同的入口进行分别查看每个人群的访问量；
    </p>
    <p class="pargraph">
        出于数据展示方便的目的，将人群分组作为饼状图的分组依据和柱状图中的每个入口分组中的更加细微的分类；
    </p>
    <p class="pargraph">
        y轴可以将访问人数作为展示的标尺进行数据的确定，此时柱状体既可以将每个入口的总访问数进行展示也可以将每个人群的访问数进行展示，示例大致如下：
    </p>
    <div id="container" style="min-width:400px;height:400px"></div>
</body>
<script>
    var chart = Highcharts.chart('container', {
        title: {
            text: '网站访问详情图'
        },
        xAxis: {
            categories: ['登录', ' 访问', '点击-链接', '点击-按钮', '点击-笔记']
        },
        plotOptions: {
            series: {
                stacking: 'normal'
            }
        },
        labels: {
            items: [{
                html: '访问人数比例',
                style: {
                    left: '230px',
                    top: '3px',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
                }
            }]
        },
        series: [{
            type: 'column',
            name: '儿童(0-6岁)',
            data: [3, 0, 0, 0, 0]
        }, {
            type: 'column',
            name: '少年(7-17岁)',
            data: [2, 3, 5, 7, 6]
        }, {
            type: 'column',
            name: '青年(18-44岁)',
            data: [4, 3, 3, 9, 0]
        }, {
            type: 'column',
            name: '中年(45-65岁)',
            data: [15, 7, 8, 19, 12]
        }, {
            type: 'column',
            name: '老年(66岁以上)',
            data: [2, 1, 0, 1, 0]
        }, {
            type: 'pie',
            name: '总访问量',
            data: [{
                name: '儿童(0-6岁)',
                y: 3,
                color: Highcharts.getOptions().colors[0] // Jane's color
            }, {
                name: '少年(7-17岁)',
                y: 23,
                color: Highcharts.getOptions().colors[1] // John's color
            }, {
                name: '青年(18-44岁)',
                y: 19,
                color: Highcharts.getOptions().colors[2] // Joe's color
            }, {
                name: '中年(45-65岁)',
                y: 61,
                color: Highcharts.getOptions().colors[2] // Joe's color
            }, {
                name: '老年(66岁以上)',
                y: 4,
                color: Highcharts.getOptions().colors[2] // Joe's color
            }],
            center: [250, 50],
            size: 100,
            showInLegend: false,
            dataLabels: {
                enabled: false
            }
        }]
    });
</script>

</html>